<template>
  <div id="LogManagement" class="LogManagement">
    <el-date-picker
      v-model="date"
      align="right"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    <el-button @click="chooseDate" type="primary">提交筛选</el-button>

    <el-table
      :data="PageData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
      style="width: 100%"
      height="550px"
      stripe>

      <el-table-column
        prop="num"
        label="编号"
        sortable
        width="120"
        align="center">
      </el-table-column>

      <el-table-column
        prop="id"
        label="用户ID"
        width="200"
        align="center"
        sortable>
      </el-table-column>

      <el-table-column
        prop="action"
        label="操作内容"
        align="center">
        <template slot-scope="scope">
          <el-tag
            :effect="getTagEffect(scope.row.action)"
            :type="getTagType(scope.row.action)"
            disable-transitions>
            {{scope.row.action}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="time"
        label="执行时间"
        width="300"
        sortable
        align="center">
      </el-table-column>

      <el-table-column
        label="管理"
        width="200">
        <template slot-scope="scope">
          <el-button size="small" type="danger" @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 8, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="PageData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'LogManagement',
  data() {
    return {
      date: '',
      currentPage: 1,
      pagesize: 8,
      PageData: [],
      AllData: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取标签样式
    getTagEffect(action) {
      const effectMap = {
        '预约医生': 'dark',
        '修改个人信息': 'dark',
        '取消预约': 'dark',
        '查看病历': 'light'
      }
      return effectMap[action] || 'plain'
    },

    // 获取标签类型
    getTagType(action) {
      const typeMap = {
        '预约医生': 'warning',
        '修改个人信息': 'info',
        '取消预约': 'danger',
        '查看病历': 'primary'
      }
      return typeMap[action] || 'info'
    },

    // 日期筛选
    chooseDate() {
      if (!this.date) {
        this.$message.warning('请先选择日期')
        return
      }
      this.$axios.post('getAllLogByDate', { date: this.date })
        .then(res => {
          this.AllData = res.data
          this.PageData = [...this.AllData]
          this.resetPagination()
        })
    },

    // 获取初始数据
    fetchData() {
      this.$axios.get('/getAllLog')
        .then(res => {
          this.AllData = res.data
          this.PageData = [...res.data]
        })
    },

    // 删除记录
    deleteRow(row) {
      this.$confirm('确定要删除这条日志吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('deleteLogByNum', { num: row.num })
          .then(() => {
            this.AllData = this.AllData.filter(item => item.num !== row.num)
            this.PageData = [...this.AllData]
            this.$message.success('删除成功')
          })
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    },

    // 分页处理
    handleSizeChange(val) {
      this.pagesize = val
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    resetPagination() {
      this.currentPage = 1
      this.pagesize = 8
    }
  }
}
</script>

<style scoped>
.LogManagement{
  width: 100%;
  height: 100vh;
}
.el-tag {
  margin: 2px;
}
</style>